<template>
  <div class="manage-orders">
    <h2>Manage Orders</h2>
    <div>
      <el-button type="primary" @click="getOrders">Get Orders</el-button>
    </div>
    <div v-if="orders.length === 0" class="empty-orders">
      <p>No orders yet</p>
    </div>
    <div v-else class="order-list">
      <div v-for="order in orders" :key="order.id" class="order-card">
        <p>Order ID: {{ order.orderid }}</p>
        <p>Product: {{ order.goods }}</p>
        <p>Quantity: 1</p>
        <p>create Time:{{ order.createtime }}</p>
        <p>address:{{ order.address }}</p>
        <el-button type="primary" size="small" @click="markAsShipped(order)">Mark as Shipped</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import store from '@/store';
export default {
  name: 'ManageOrders',
  data() {
    return {
      orders: [],
    };
  },
  methods: {
    getOrders() {
      axios.get(`http://localhost:8080/api/seller/orders/${store.getters['seller/sellername']}`).then((res) => {
        this.orders = res.data.data;
        this.orders.reverse();
      }).catch((err) => {
        console.log(err);
      });
    },

    markAsShipped(order) {
      this.orders = this.orders.filter((o) => o.id !== order.id);
      ElMessage.success(`Order ${order.id} marked as shipped`);
    },
  },
  mounted() {
    this.getOrders();
  },
};

</script>

<style scoped>
.manage-orders {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.order-list {
  display: grid;
  gap: 20px;
}

.order-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.order-card p {
  font-weight: bold;
  color: #333;
}

.empty-orders {
  text-align: center;
  color: #888;
}
</style>